<template>
	<view class="">
		<view class="navbar">
			<view class="left" @click="popupClick">
				<text>设置</text>
			</view>
			<view class="center">
				<view class="centerBot">
					{{tex}}
				</view>
			</view>
			<view class="right" @click="rightClick">
				<text>刷新</text>
			</view>
		</view>
		<uni-popup class="popup" ref="popup" type="dialog">
			<uni-navbarpopup></uni-navbarpopup>
		</uni-popup>
		<uni-popup class="popup" ref="popupright" type="center">
			<view class="info">
				<view class="infotop"><text>请确认是否进行刷新？</text></view>
				<view class="infobot">
					<view class="botleft" @click="leftClicks">
						<text>取消</text>
					</view>
					<view class="botright" @click="rightClicks">
						<text>继续</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tex: '加减乘除',
			}
		},
		methods:{
		    popupClick(){
				this.$refs.popup.open()
		    },
			rightClick() {
				this.$refs.popupright.open()
			},
			leftClicks() {
				this.$refs.popupright.close()
			},
			rightClicks() {
				let num = null;
				switch(this.msg) {
					case 9:
					num = 10;
					break;
					case 10:
					num = 9;
					break;
					case 99:
					num = 100;
					break;
					case 100:
					num = 99;
					break;
					case 999:
					num = 1000;
					break;
					case 1000:
					num = 999;
					break;
				}
				this.$store.dispatch('change', num)
				this.$refs.popupright.close()
			}
	    },
		props: {
		    msg: {
				type: Number,
				default() {
					return 10
				}
		    }
		}
	}
</script>

<style>
	.navbar {
		display: flex;
		height: 100upx;
		width: 750upx;
		text-align: center;
		background-color: #d8ba8b;
		position: relative;
	}
	.left {
		position: absolute;
		left: 10upx;
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
	}
	.right {
		position: absolute;
		right: 10upx;
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
	}
	.center {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.centerBot {
		font-size: 40upx;
		font-weight: 800;
		color: #000000;
	}
	.popup {
		margin-top: 100upx;
	}
	.info {
		width: 700upx;
		text-align: center;
		line-height: 100upx;
		background-color: #efbf7b;
		border-radius: 10upx;
	}
	.infotop {
		height: 100upx;
		width: 700upx;
		font-size: 40upx;
		font-weight: 800;
	}
	.infobot {
		height: 100upx;
		width: 700upx;
		display: flex;
		justify-content: space-around;
		font-size: 36upx;
		font-weight: 600;
	}
	.botleft {
		width: 349upx;
		background-color: #f2e2c4;
		border-radius: 0 0 0 10upx;
		color: #96876f;
		border-right: 2upx solid #ccc;
	}
	.botright {
		width: 349upx;
		background-color: #f2e2c4;
		border-radius: 0 0 10upx 0;
		color: #ef5425;
	}
</style>
